<template>
  <a-card class="body-container">
    <s-list-form :enable-more="false">
      <template #less>
        <s-form-item
          label="名称"
          size="list-middle"
          name="name"
          :colon="true"
          :display-title="true"
          :rules="[{ max: 255, message: '最长为255位' }]"
        >
          <s-input v-model="query.name" :allow-clear="true" placeholder="请输入名称" />
        </s-form-item>
        <s-form-item
          label="类型"
          size="list-middle"
          name="type"
          :colon="true"
          :display-title="true"
        >
          <s-select
            v-model="query.type"
            :allow-clear="true"
            placeholder="请选择类型"
            :show-search="true"
            code="ONLINE_API_TYPE"
          />
        </s-form-item>
      </template>
      <template #more> </template>
    </s-list-form>
    <s-tool-bar>
      <template #left>
        <s-button
          v-if="authorize.insert"
          type="primary"
          icon="plus-outlined"
          @click="$parent.openAdd()"
          >新增</s-button
        >
        <a-popconfirm
          v-if="authorize.deleteMulti"
          title="确认删除所选数据？"
          ok-text="是"
          cancel-text="否"
          @confirm="deleteMulti"
        >
          <s-button type="danger" icon="delete-outlined">删除</s-button>
        </a-popconfirm>
      </template>
      <template #right>
        <s-button type="primary" icon="search-outlined" @click="search">查询</s-button>
        <s-button style="margin-left: 8px" icon="stop-outlined" @click="query = {}">重置</s-button>
      </template>
    </s-tool-bar>
    <s-table
      ref="table"
      bordered
      :echos="[
        {
          name: 'type',
          label: 'text',
          value: 'value',
          url: '/data/dict/item/selectSingleDictByGroupId?groupId=ONLINE_API_TYPE'
        }
      ]"
      :scroll="{ y: tableHeight }"
      :columns="columns"
      url="/onlineApi/pageList"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a
            v-if="authorize.selectOneById"
            style="margin-right: 8px"
            @click="$parent.openDetail(record.id)"
          >
            <s-icon type="eye-outlined" />查看
          </a>
          <a
            v-if="authorize.update"
            style="margin-right: 8px"
            @click="$parent.openDebug(record.id)"
          >
            <s-icon type="bug-outlined" />调试
          </a>
          <a
            v-if="authorize.update"
            style="margin-right: 8px"
            @click="$parent.openUpdate(record.id)"
          >
            <s-icon type="edit-outlined" />编辑
          </a>
          <a-popconfirm
            v-if="authorize.delete"
            title="确认删除此条数据？"
            ok-text="是"
            cancel-text="否"
            @confirm="deleteById(record.id)"
          >
            <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
          </a-popconfirm>
        </template>
      </template>
    </s-table>
  </a-card>
</template>

<script>
const columns = [
  { dataIndex: 'id', title: '编号', width: 200, ellipsis: true },
  { dataIndex: 'name', title: '名称', width: 200, sorter: true, ellipsis: true },
  { dataIndex: 'typeName', title: '类型', width: 200, sorter: true, ellipsis: true },
  { dataIndex: 'description', title: '接口说明', width: 300, sorter: false, ellipsis: true },
  { dataIndex: 'createByAccount', title: '创建人', width: 200, sorter: false, ellipsis: true },
  { dataIndex: 'createDate', title: '创建时间', width: 200, sorter: true, ellipsis: true },
  { dataIndex: 'updateByAccount', title: '修改人', width: 200, sorter: true, ellipsis: false },
  { dataIndex: 'updateDate', title: '修改时间', width: 200, sorter: true, ellipsis: true },
  { title: '操作', fixed: 'right', key: 'action', width: 300 }
]
export default {
  name: 'QueryList',
  data() {
    return {
      query: {},
      columns: columns
    }
  },
  authorize: '/onlineApi/permissionList',
  methods: {
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api
          .DELETE('/onlineApi/deleteMulti', { ids: keys.toString() })
          .then(() => {
            this.$loading(false)
            this.search()
          })
          .catch(() => {
            this.$loading(false)
          })
      }
    },
    search() {
      const _this = this
      const query = Object.assign({}, this.query)

      this.$refs.table.search(query)
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/onlineApi/delete', { id: id })
        .then(() => {
          this.$loading(false)
          this.search()
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
